<script lang="ts" setup>
import type { MenuOption } from 'naive-ui'
import { NIcon } from 'naive-ui'
import type { Component } from 'vue'
import { computed, h, onMounted, ref, watch } from 'vue'
import routes from '@/router/routes'
import { RouterLink, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import type { OMenusGetItem } from '@/typed/response'

interface IProps {
	collapsed: boolean

	[key: string]: any
}

const userStore = useUserStore();
const adminPath = '/console'
const route = useRoute()
const emit = defineEmits(['show', 'close'])
withDefaults(defineProps<IProps>(), {
	bg: 'rgba(248,241,255,.7)',
	radius: 6
})

// 选中的链接
const activeKey = ref()
// 展开的路径
const expandedKeys = ref<string[]>([])
const menuOptions = computed<MenuOption[]>(() => {
	const localMenu = renderMenu(routes.find(i => i.path === adminPath)?.children)
	// const routeMap = routes.filter(i => i.path === '/console')[0].children
	// const serverMenu = renderServerMenu(userStore.menu)
	// console.log(routeMap)
	// console.log(serverMenu)
	return localMenu
})

onMounted(() => {
	getActiveRoute()
})
watch(
	() => route.fullPath,
	() => {
		getActiveRoute()
	}
)

function getActiveRoute() {
	const activeRoute = route.matched[route.matched.length - 1];
	// 如果一个路由不在导航里显示，则需要手动获取到meta.active中的配置，与上一级菜单进行匹配
	activeKey.value = activeRoute.meta.showInMenu ? activeRoute.path : activeRoute.meta.active
	expandedKeys.value = route.matched.filter(i => i.path !== adminPath).map(i => i.path)
}

function renderIcon(icon: Component) {
	return () => h(NIcon, null, {default: () => h(icon)})
}

function renderLabel(i: any) {
	return i.children?.length ? i.meta.title : h(
		RouterLink,
		{
			to: i.redirect || i.path
		},
		{
			default: () => i.meta.title
		}
	)
}

// function renderServerLabel(i: OMenusGetItem) {
// 	return i.menuType === 'M' ? i.menuName : h(
// 		RouterLink,
// 		{
// 			to: i.path
// 		},
// 		{
// 			default: () => i.menuName
// 		}
// 	)
// }

function renderMenu(children: any[] = []): MenuOption[] {
	return children.filter(i => i.meta.showInMenu).map((i: any) => ({
		icon: i.icon && renderIcon(i.icon),
		label: () => renderLabel(i),
		key: i.path,
		...(i.children?.length ? {children: renderMenu(i.children)} : {})
	}))
}

// function renderServerMenu(children: OMenusGetItem[] = []): MenuOption[] {
// 	return children.filter(i => i.status === 0 && i.visible === 0).map((i: any) => ({
// 		icon: i.icon && renderIcon(i.icon),
// 		label: () => renderServerLabel(i),
// 		key: i.path,
// 		...(i.children?.length ? {children: renderServerMenu(i.children)} : {})
// 	}))
// }
</script>

<template>
	<n-layout-sider
		:collapsed-width="80"
		:collapsed="collapsed"
		:width="200"
		bordered
		collapse-mode="width"
		show-trigger
		@collapse="emit('close')"
		@expand="emit('show')"
	>
		<header>商户云</header>
		<n-menu
			:collapsed-width="80"
			v-model:value="activeKey"
			:options="menuOptions"
			v-model:expanded-keys="expandedKeys"
			class="menu"
			accordion
		/>
	</n-layout-sider>
</template>

<style lang="less" scoped>
header {
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--border-color);
}

:deep(.n-menu) {
	height: calc(100% - 60px);
}
</style>
